<template>
  <div class="home">
    <div class="container">
      <img ref="bkImage" class="bkg" src="../assets/logo.jpg" alt="" />
      <div class="start" @click="intoHome">
        <img id="startBtn" src="../assets/start.png" alt="" />
      </div>
      <div id="arrow">
        <img src="../assets/arrow.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { onMounted, onUnmounted, ref } from "vue";
import router from "../router/index";
import { clickAnimation, blinkAnimation } from "../utils/animation";

const timer = ref();
const number = ref("0");

const intoHome = () => {
  number.value = (Number(number.value) + 1).toString()
  axios
    .post("/server/write", {
      content: number.value.toString(),
    })
    .then(() => {
      clickAnimation("startBtn", 200, () => {
        router.push("/home");
      });
    })
    .catch((err) => {
      console.log(err);
      number.value = "请检查服务是否正常启动";
      clickAnimation("startBtn", 200, () => {
        router.push("/home");
      });
    });
};

onMounted(() => {
  axios
    .get("/server/read")
    .then((res) => {
      console.log(res.data);
      number.value = res.data.content;
    })
    .catch((err) => {
      console.log(err);
      number.value = "请检查服务是否正常启动";
    });
  timer.value = setInterval(() => {
    blinkAnimation("arrow");
  }, 1000);
});
onUnmounted(() => {
  clearInterval(timer.value);
});
</script>

<style lang="scss">
.home {
  height: 100%;
  .container {
    height: 100%;
    position: relative;
    .start {
      position: absolute;
      left: 50%;
      bottom: 28%;
      transform: translate(-50%, -50%);
      cursor: pointer;
    }
    #arrow {
      position: absolute;
      left: 70%;
      bottom: 32%;
      width: 20%;
    }
  }
}
</style>
